<template>
    <view class="category-container">
        <MidLayout>

            <IndexTitle zh_text="色卡" en_text="Catalogs"></IndexTitle>


            <view style="display: flex;gap: 10rpx;flex-direction: column;">
            <view v-for="(item, index) in color_atlas_category" :key="index">
                <view class="container" v-if="item.children.length == 2">


                    <view class="card cube">


                        <view class="content radius">
                            <up-image height='210rpx' width="210rpx" :src="item.button_image_url" mode='aspectFill'
                                :showMenuByLongpress="false"></up-image>
                        </view>

                    </view>


                    <view v-for="(i, index) in item.children" :key="index"
                        :class="['card', 'rectangle', { 'top': index == 0 }, { 'bottom': index == 1 }]"
                        @click="download(i.id)">
                        <view class="content radius" style="width: 100%;">
                            <up-image height='100rpx' width="100%" :src="i.button_image_url" mode='aspectFill'
                                :showMenuByLongpress="false"></up-image>

                        </view>
                    </view>

                </view>

                <view class="container3" v-if="item.children.length == 1">

                    <view class="card cube3 cube-a radius">
                        <up-image height='110rpx' width="210rpx" :src="item.button_image_url" mode='aspectFill'
                            :showMenuByLongpress="false"></up-image>
                    </view>
                    <view class="card cube-b" v-for="(i, index) in item.children" :key="index" @click="download(i.id)">


                        <view class="content radius" style="width: 100%;">
                            <up-image height='110rpx' width="100%" :src="i.button_image_url" mode='aspectFill'
                                :showMenuByLongpress="false"></up-image>

                        </view>
                    </view>
                </view>
            </view>
        </view>



        </MidLayout>
    </view>
</template>
<script setup lang="ts">
import { defineProps, ref } from 'vue'
import IndexTitle from '@/pages/walls/index-title.vue'


const props = defineProps({
    color_atlas_category: {
        type: Array,
        default: []
    }
})

const download = (id) => {

    uni.navigateTo({
        url: `/pages/search/index2?id=${id}`
    })

}

</script>

<style scoped lang="scss">
.warp {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
}

.container {
    display: grid;
    grid-template-columns: fit-content(40%);
    /* Fixed 200px for cube, flexible for rectangles */
    grid-template-rows: 1fr 1fr;
    /* Two rows for the rectangles */
    grid-template-areas:
        "cube top"
        "cube bottom";
    gap: 10rpx;
    /* Gap between cards */
    // max-width: 600rpx;
    height: 210rpx;
    /* Total height to accommodate cube (200px) + gaps (20px) + extra space */

    .top {
        grid-area: top;
    }

    .bottom {
        grid-area: bottom;
    }

    .cube {
        grid-area: cube;
    }
}


.container2 {
    display: grid;
    grid-template-columns: fit-content(40%);
    /* Fixed 200px for cube, flexible for rectangles */
    grid-template-rows: 1fr 1fr;
    /* Two rows for the rectangles */
    grid-template-areas:
        "a b";
    gap: 10rpx;
    /* Gap between cards */
    // max-width: 600rpx;
    height: 110rpx;
    /* Total height to accommodate cube (200px) + gaps (20px) + extra space */


    .cube {
        grid-area: a;
    }

    .rectangle-b {
        grid-area: b;
    }

    .rectangle-d {
        grid-area: d;
    }

    .rectangle-c {
        grid-area: c;
    }

    .rectangle-e {
        grid-area: e;
    }
}

.yellow {
    background-color: #f2d73f;
    /* Yellow color */
    color: #fff;
}

.peach {
    background-color: #fbaf52;
    /* Example color, adjust as needed */
    color: #fff;
}

._01B {
    background-color: #ffcc99;
    /* Example color, adjust as needed */
    color: #fff;
}

.orange {
    background-color: #ff8c00;
    /* Orange color */
    color: white;
}

.container3 {
    display: grid;
    grid-template-columns: fit-content(40%) 1fr;
    /* Fixed 200px for cube, flexible for rectangles */

    grid-template-areas:
        "a b";
    gap: 10rpx;
    /* Gap between cards */
    // max-width: 600rpx;
    height: 110rpx;
    /* Total height to accommodate cube (200px) + gaps (20px) + extra space */


    .cube-a {
        grid-area: a;
    }

    .cube-b {
        grid-area: b;
    }

}

.radius {
    border-radius: 8rpx;
    overflow: hidden;
}

.card {

    // text-align: center;
    border-radius: 8rpx;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    display: flex;
    // flex-direction: column;
    justify-content: center;
    align-items: center;
}

.cube {

    width: 210rpx;
    height: 210rpx;
    /* Fixed size for cube */
}

.cube3 {

    width: 210rpx;
    height: 110rpx;
    /* Fixed size for cube */
}

.rectangle {
    width: 100%;
    /* Full width of the right column */
}
</style>
